'use strict';
//门店列表
import React,{Component} from 'react';
import Header from '../../common/header';
import * as URLconstant from '../../constant/URLconstant'
import Util from '../../common/util';
import ClerkFans from './serviceFans';
import {
    View,
    Text,
    TouchableOpacity,
    Image,
    StyleSheet,
    ScrollView,
    ListView
} from 'react-native';
export default class shopMember extends Component{
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            loaded:true,
            clerkList:[],
            allFansCount:0
        };
      }

    componentDidMount() {
        this.getClerkList()
    }

      getClerkList(){
          let url = URLconstant.FANS_CLERK_LIST
          let datakey=[]
          datakey['user_id']=this.props.user_id
          datakey['shop_id']=this.props.shop_id
          Util.get(url,datakey,this.getClerkListSuc.bind(this),this.errorCallback.bind(this))
      }

    getClerkListSuc(datas){
        if(datas.status==0){
            this.setState({
                clerkList:datas.data.info.workerList,
                allFansCount:datas.data.info.allFansCount,
                loaded:false
            })
        }
    }
    errorCallback(err){

    }

    clerkFans(worker_id){
       this.props.navigator.push({
           component:ClerkFans,
           passProps:{
               user_id:worker_id
           }
       })
    }

      render(){
          let allFansCount = this.state.allFansCount
          return(
              <View style={{flex:1,backgroundColor:"#f0f0f0"}}>
                  <Header navigator={this.props.navigator} initObj={{ title: '粉丝管理',id:2}}/>
                  {
                      this.state.loaded?
                          <View style={{flex:1}}>
                              {Util.loading()}
                          </View>:
                          <View style={{flex:1}}>
                              {
                                  this.state.allFansCount==0?
                                      <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                                          <Text>没有店员</Text>
                                      </View>
                                      :
                                      <View style={{flex:1}}>
                                          <View style={styles.clerk_header}>
                                              <Text style={{fontSize:15,color:"#F75061"}}>门店总粉丝数：{allFansCount}</Text>
                                          </View>
                                          <ScrollView style={{flex:1}}>
                                              {
                                                  this.state.clerkList.map((item,index)=>{
                                                      return(
                                                          <TouchableOpacity onPress={()=>this.clerkFans(item.worker_id)} key={index} style={styles.clerk_item}>
                                                              <Image
                                                                  source={{uri:item.workerInfo.headimage}}
                                                                  resizeMode={'cover'}
                                                                  style={{width:44,height:44,borderRadius:22,}}
                                                              />
                                                              <View style={styles.item_right}>
                                                                  {
                                                                      item.worker_id==null||item.worker_id==0?
                                                                          <Text style={{fontSize:14,color:"#333"}}>暂无店员</Text>:
                                                                          <Text style={{fontSize:14,color:"#333"}}>{item.workerInfo.real_name}({item.worker_id})</Text>
                                                                  }
                                                                  <View style={{flexDirection:'row',alignItems:'center'}}>
                                                                      <Text style={{fontSize:14,color:"#333"}}>团队数：</Text>
                                                                      <Text style={{fontSize:14,color:"#CC1D22"}}>{item.fans_count}</Text>
                                                                  </View>
                                                              </View>
                                                          </TouchableOpacity>
                                                      )
                                                  })
                                              }
                                          </ScrollView>
                                      </View>
                              }
                          </View>
                  }
              </View>
          )
      }
}
var styles = StyleSheet.create({
    clerk_header:{
        paddingHorizontal:10,
        height:35,
        justifyContent:'center'
    },
    clerk_item:{
        flexDirection:'row',
        alignItems:'center',
        padding:10,
        backgroundColor:"#fff",
        borderTopWidth:1,
        borderTopColor:"#e0e0e0"
    },
    item_right:{
        justifyContent:'space-between',
        flex:1,
        paddingLeft:10,
        height:44,
    }
})